<template>
  <view>
    <view
      class="mes-card-index"
      v-for="(pItem, pIndex) in form.items"
      :key="pIndex"
    >
      <view class="head">
        <view class="head-left">
          <template v-if="pItem.head.tags">
            <text
              v-for="(tagItem, tagIndex) in pItem.head.tags"
              :key="tagIndex"
              class="tag"
              :class="tagItem.status == 1 ? 'done' : 'undone'"
            >
              {{ tagItem.name }}
            </text>
          </template>
          <text class="title text-over-1">{{ pItem.head.title }}</text>
        </view>
        <view class="head-right">{{ pItem.head.price }}</view>
      </view>
      <view class="subhead">
        <!-- 作用域插槽 -->
        <slot name="subhead" :data="pItem"></slot>
      </view>
      <view class="body">
        <view
          class="body-item"
          v-for="(cItem, cIndex) in pItem.body"
          :key="cIndex"
        >
          <text>{{ cItem.name }}：</text>
          <text>{{ cItem.value }}</text>
        </view>
      </view>
      <view class="footer">
        <text class="iconfont icon-gengduo" @tap="more(pItem.row)"></text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    form: Object
  },
  methods: {
    // 更多
    more(row) {
      if (this.form.more) this.form.more(row)
      const itemList = this.form.actionSheet.map((item) => item.name)
      uni.showActionSheet({
        itemList,
        success: ({ tapIndex }) => {
          const temp = this.form.actionSheet[tapIndex]

          if (temp.showModal) {
            uni.showModal({
              title: temp.title || '提示',
              content: temp.content || '是否确认删除？',
              success: ({ confirm, cancel }) => {
                confirm && temp.event && temp.event(row)
              }
            })
          } else {
            temp.event && temp.event(row)
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.mes-card-index {
  width: 702rpx;
  padding: 40rpx 24rpx 24rpx;
  margin: 0 auto 20rpx;
  background: #fff;
  border-radius: 16rpx;
  color: #111111;
  .head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    align-items: center;
    font-weight: 500;
    .head-left {
      overflow: hidden;
      flex: 1;
      margin-right: 20rpx;
      display: flex;
      align-items: center;
      .tag {
        padding: 6rpx 8rpx;
        margin-right: 20rpx;
        background: #f5f5f5;
        border-radius: 6rpx;
        font-size: 24rpx;
        color: #888888;
        &.done {
          background: #e1faf8;
          color: #35b9bc;
        }
        &.undone {
          background: #f5f5f5;
          color: #888;
        }
      }
      .title {
        flex: 1;
      }
    }
  }
  .body {
    display: flex;
    flex-direction: column;
    margin-top: 40rpx;
    font-size: 24rpx;
    color: #666666;
    line-height: 24rpx;
    .body-item {
      margin-bottom: 20rpx;
    }
  }
  .footer {
    display: flex;
    justify-content: flex-end;
    .icon-gengduo {
      font-size: 48rpx;
      color: #000;
    }
  }
}
</style>
